<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
      * {
          margin: 0;
          padding: 0;
      }

      html {
          height: 100%;
      }

      body {
          height: 100%;
      }

      .container {
          height: 100%;
      }

      .login-wrapper {
          /* 添加盒子阴影 */
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
          background-color: #fff;
          width: 358px;
          height: 548px;
          border-radius: 15px;
          padding: 0 50px;
          position: relative;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
      }

      .header {
          font-size: 38px;
          font-weight: bold;
          text-align: center;
          line-height: 200px;
      }

      .input-item {
          display: block;
          width: 100%;
          margin-bottom: 20px;
          border: 0;
          padding: 10px 0;
          border-bottom: 1px solid rgb(128, 125, 125);
          font-size: 15px;
          outline: none;
      }

      .btn {
          margin-top: 40px;
          padding: 10px;
          text-align: center;
          width: 100%;
          height: 40px;
          border: 1px solid rgb(128, 125, 125);
          border-radius: 10px;
          background-image: linear-gradient(rgba(194, 251, 234, 0.78), rgba(194, 246, 251, 0.76));
          color: #000000;
      }

      .btn:hover {
          background-image: linear-gradient(to right, #a6c1ee, #cfd2d6);
          cursor: pointer;
      }

      a {
          text-decoration-line: none;
          color: #abc1ee;
      }

      /* 去掉填充后的背景色 */
      input:-webkit-autofill {
          background: transparent;
          transition: background-color 50000s ease-in-out 0s;
          -webkit-text-fill-color: unset;
      }
  </style>
</head>
<body>
<div class="container">
  <div class="login-wrapper">
    <!-- /login请求路径，如果通过网关的话，需要网关添加转发，也可以在路径前添加服务名/auth/login，不过后者单独请求认证服务的话就会404 -->
    <form method="post" action="/login">
      <div class="header">Please sign in</div>
      <div class="form-wrapper">
        <p>
          <label for="username"></label>
          <input type="text" id="username" name="username" placeholder="username" class="input-item">
        </p>
        <p>
          <label for="password"></label>
          <input type="password" id="password" name="password" placeholder="password" class="input-item">
        </p>
        <button class="btn" type="submit">Login</button>
      </div>
    </form>
  </div>
</div>
</body>
</html>